<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel=stylesheet type=text/css href="/static/css/Defaultv2/Defaultv2.css">
  <link rel=stylesheet type=text/css href="/static/css/slider.css">
  <link rel="stylesheet" href="/static/vendor/bootstrap/css/bootstrap.min.css">
  <link href="/static/vendor/bootstrap-toggle/css/bootstrap-toggle.min.css" rel="stylesheet">
  <link rel="stylesheet" href="/static/vendor/fontawesome/css/all.css">
  <script src="/static/vendor/socketio/js/socket.io.js"></script>
  <script src="/static/vendor/jquery/js/jquery-3.3.1.min.js"></script>

  <title>OSP First Run</title>

  <style>
    body {
      height: 100%;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      background-repeat: no-repeat;
      background: #ffffff;
    }
  </style>

</head>

<body>

  <div class="container-fluid">
    <div class="row justify-content-center">
      <div class="col-lg-10 col-md-12" style="margin-top:15px;margin-bottom:30px;">
        <div class="card shadow">
          <h5 class="card-header"><img src="/static/img/logo.png" width="64px" height="64px"> Open Streaming Platform</h5>
          <div class="card-body">
            <h5 class="card-title"><i class="fas fa-cogs"></i> Initial Setup Wizard</h5><br>

            <ul class="nav nav-pills mb-3" id="admin-nav" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active"  role="tab" id="default-firstrun" href="#default" data-toggle="pill" aria-controls="default-firstrun" aria-selected="true">Setup as New</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" role="tab" id="default-restore" href="#restore" data-toggle="pill" aria-controls="default-restore" aria-selected="false">Restore from Backup</a>
                </li>
            </ul>
            <div class="tab-content" id="admin-content">
              <div class="tab-pane fade show active" role="tabpanel" aria-labelledby="default-firstrun" id="default">
                <p class="card-text">In order to ensure proper operation of OSP, please provide the following information:</p>
                <form action="/settings/initialSetup" method="post">
                  <div class="row">
                    <div class="col-12">
                      <h4><i class="fas fa-user"></i> Initial Admin</h4>
                      Username: <input type="text" name="username" class="form-control" required>
                      Email: <input type="email" id="email" name="email" class="form-control" required>
                      Password: <input type="password" name="password1" class="form-control" required>
                      Confirm Password: <input type="password" name="password2" class="form-control" required>
                    </div>
                  </div>
                  <hr>
                  <div class="row">
                    <div class="col-12 col-md-6">
                      <h4><i class="fas fa-server"></i> Server Settings</h4>
                      Server Name: <input type="text" name="serverName" class="form-control" required>
                      <br>
                      <div class="form-row">
                          <div class="form-group mx-2">
                            Server Protocol:
                              <select name="siteProtocol" class="form-control">
                                  <option value="http://">http://</option>
                                  <option value="https://">https://</option>
                              </select>
                          </div>
                          <div class="form-group mx-2">
                            Server Hostname/IP Address: <input type="text" name="serverAddress" class="form-control" value="{{sysSettings.siteAddress}}" size="48" required >
                          </div>
                      </div>
                      Allow Users to Record:<br>
                      <label class="switch">
                        <input type="checkbox" data-toggle="toggle" data-width="50" data-on=" " data-off=" " id="recordSelect" name="recordSelect">
                      </label><br>
                      Allow Users to Upload Videos:<br>
                      <label class="switch">
                        <input type="checkbox" data-toggle="toggle" data-width="50" data-on=" " data-off=" " id="uploadSelect" name="uploadSelect">
                      </label><br>
                      Enable Adaptive Streaming (Can Cause Significant CPU Usage Per Stream):<br>
                      <label class="switch">
                        <input type="checkbox" data-toggle="toggle" data-width="50" data-on=" " data-off=" " id="adaptiveStreaming" name="adaptiveStreaming">
                      </label><br>
                      Display Empty Channels, Streamers, and Topics<br>
                      <label class="switch">
                        <input type="checkbox" data-toggle="toggle" data-width="50" data-on=" " data-off=" " id="showEmptyTables" name="showEmptyTables">
                      </label><br>
                      Globally Allow Comments (Can be Disabled on a Per Video Basis)<br>
                      <label class="switch">
                        <input type="checkbox" data-toggle="toggle" data-width="50" data-on=" " data-off=" " id="allowComments" name="allowComments">
                      </label><br>
                    </div>

                    <div class="col-12 col-md-6">
                      <h4><i class="fas fa-envelope"></i> Email Settings</h4><br>
                      <button type="button" class="btn btn-primary my-2" onclick="testEmail();">Test Email Settings</button>
                      <div id="emailsuccess" style="display:none;"><i class="fas fa-check-circle" style="color:springgreen;"></i> Email Test was Successful!</div>
                      <div id="emailfailure" style="display:none;"><i class="fas fa-times-circle" style="color:orangered"></i> Email Test Failed!</div>
                      <br>
                      SMTP Email From: <input type="email" id="smtpSendAs" name="smtpSendAs" class="form-control" value="{{sysSettings.smtpSendAs}}" required>
                      SMTP Address: <input type="text" id="smtpAddress" name="smtpAddress" class="form-control" value="{{sysSettings.smtpAddress}}" required>
                      SMTP Port: <input type="number" id="smtpPort" name="smtpPort" class="form-control" value={{sysSettings.smtpPort}} required>
                      SMTP Username:<input type="text" id="smtpUser" name="smtpUser" class="form-control" value="{{sysSettings.smtpUsername}}">
                      SMTP Password<input type="password" id="smtpPassword" name="smtpPassword" class="form-control" value="{{sysSettings.smtpPassword}}">
                      SMTP SSL:<br>
                      <input type="checkbox" data-toggle="toggle" data-width="50" data-on=" " data-off=" " id="smtpSSL" name="smtpSSL">
                      <br>
                      SMTP TLS:<br>
                      <input type="checkbox" data-toggle="toggle" data-width="50" data-on=" " data-off=" " id="smtpTLS" name="smtpTLS">
                    </div>
                  </div>
                  <hr>
                  <div class="form-row text-center">
                    <button type="submit" class="btn btn-primary" style="width:100%;">Submit</button>
                  </div>
                </form>
            </div>
              <div class="tab-pane fade" role="tabpanel" aria-labelledby="default-restore" id="restore">
                <div class="row">
                    <div class="col-lg-6 col-md-12">
                        <h4>Restore the OSP Database</h4>
                        <p>** Restoring a backup will wipe all existing data! **</p>
                        <form action="/settings/dbRestore" enctype=multipart/form-data method="post">
                            <div class="custom-file">
                                <input type="file" class="custom-file-input" name=restoreData id="restoreData" required>
                                <label class="custom-file-label" for="restoreData">Upload Backup File</label>
                                <script>
                                    $('#restoreData').on('change',function(){
                                        //get the file name
                                        var fileName = $(this).val();
                                        //replace the "Choose a file" label
                                        $(this).next('.custom-file-label').html(fileName);
                                    })
                                </script>
                            </div>
                            <br><br>
                            <h5>Restore Options</h5>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="" name="restoreVideos" id="restoreVideos">
                              <label class="form-check-label" for="restoreVideos">
                                Restore Recorded Video DB Table
                              </label>
                            </div>
                            <br>
                            <input type="hidden" value="dbRestore" id="settingType" name="settingType">
                            <input type="submit" class="btn btn-warning" value="Restore">
                        </form>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
  </div>
  </div>

  <script src="/static/vendor/jquery/js/jquery-3.3.1.min.js"></script>
  <script src="/static/vendor/popper/js/popper.min.js"></script>
  <script src="/static/vendor/bootstrap/js/bootstrap.min.js"></script>
  <script src="/static/vendor/bootstrap-toggle/js/bootstrap-toggle.min.js"></script>


<script type="text/javascript" charset="utf-8">
    var conn_options = {
        'sync disconnect on unload':true
    };

    var socket = io();
</script>

<script>
    socket.on('testEmailResults', function(msg) {
        var results = msg['results'];
        if (results == "True") {
            document.getElementById("emailsuccess").style.display = "Block";
        } else if (results == "False") {
            document.getElementById("emailfailure").style.display = "Block";
        }
    });
</script>

<script>
    function testEmail(){
        smtpAddress = document.getElementById("smtpAddress").value;
        smtpPort = document.getElementById("smtpPort").value;
        smtpTLS = document.getElementById("smtpTLS").checked;
        smtpSSL = document.getElementById("smtpSSL").checked;
        smtpUser = document.getElementById("smtpUser").value;
        smtpPassword = document.getElementById("smtpPassword").value;
        smtpSender = document.getElementById("smtpSendAs").value;

        document.getElementById("emailsuccess").style.display = "None";
        document.getElementById("emailfailure").style.display = "None";

        socket.emit('testEmail', {smtpServer:smtpAddress, smtpPort:smtpPort, smtpTLS: smtpTLS, smtpSSL:smtpSSL, smtpUsername:smtpUser, smtpPassword:smtpPassword, smtpSender:smtpSender, smtpReceiver:smtpSender});
    }
</script>

</body>

</html>